<template>
  <div class="homestore">
    <div class="title">门店分布</div>
    <ul class="list">
      <li>
        <div class="img">
          <img src="~assets/image/home/store2.jpg" alt="" />
        </div>
        <div class="text">
          <div class="t">广州大都会广场店</div>
          <div class="m">地址：广州市天河区天河北路183号大都会广场3101室</div>
          <div class="b">电话：136-0246-1913</div>
        </div>
      </li>
      <li>
        <div class="img">
          <img src="~assets/image/home/store2.jpg" alt="" />
        </div>
        <div class="text">
          <div class="t">广东药科大学店</div>
          <div class="m">地址：广州市番禺区外环东路280号药科大学1号楼308室</div>
          <div class="b">电话：136-0246-1913</div>
        </div>
      </li>
      <li>
        <div class="img">
          <img src="~assets/image/home/store3.jpg" alt="" />
        </div>
        <div class="text">
          <div class="t">上海店</div>
          <div class="m">地址：地址：上海市-黄浦区-南京东路353号</div>
          <div class="b">电话：136-0246-1913</div>
        </div>
      </li>
      <li>
        <div class="img">
          <img src="~assets/image/home/store4.jpg" alt="" />
        </div>
        <div class="text">
          <div class="t">北京店</div>
          <div class="m">地址：北京市-朝阳区-门外大街吉庆里6号</div>
          <div class="b">电话：136-0246-1913</div>
        </div>
      </li>
    </ul>
    <div class="more">
      <nuxt-link to="/shop"> 更多门店 </nuxt-link>
    </div>
  </div>
</template>

<script>
// 此行导入其他文件（如组件，工具js，第三方插件js，json文件，图片文件等）
export default {
  name: "HomeStore",
  props: {},
};
</script>

<style scoped>
.homestore {
  margin: 0.52rem 0.35rem 0;
}
.homestore .title {
  font-size: 0.33rem;
  font-weight: 800;
  line-height: 0.47rem;
  position: relative;
}
.homestore .title::before {
  width: 0.66rem;
  height: 0.02rem;
  content: "";
  background-color: #0088ff;
  position: absolute;
  bottom: 0;
  left: 0.34rem;
}
.homestore .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.16rem;
  color: #a2a3a6;
}
.homestore .list li {
  width: 3.28rem;
  margin-top: 0.21rem;
  box-shadow: 0 0 0.28rem rgb(240, 240, 240);
}
.homestore .list li img {
  width: 3.28rem;
}
.homestore .list li .text {
  padding-left: 0.21rem;
}
.homestore .list li .t {
  color: #0b203e;
  font-size: 0.21rem;
  line-height: 0.29rem;
  position: relative;
  margin-top: 0.16rem;
  margin-bottom: 0.07rem;
}
.homestore .list li .t::before {
  width: 0.05rem;
  height: 0.23rem;
  content: "";
  background-color: #0088ff;
  position: absolute;
  top: 0.05rem;
  left: -0.08rem;
}
.homestore .list li .m {
  height: 0.6rem;
}
.homestore .list li .b {
  height: 0.3rem;
}
.homestore .more {
  width: 1.7rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  background-color: #0c5da9;
  font-size: 0.21rem;
  color: #fff;
  margin: 0.34rem auto 0.52rem;
}
</style>
